<!DOCTYPE html>
<html>

<head>
  <script src="./konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Shape类是所有图形的基类</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <h3>
    Shape类是所有图形的基类,提供了一种方式来自定义绘制任何形状
  </h3>
  <hr>
  <div id="container"></div>
  <script>
    var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
    })

    var layer = new Konva.Layer()

    /*
     * create a triangle shape by defining a
     * drawing function which draws a triangle
     */
    var triangle = new Konva.Shape({

      sceneFunc: function (context, shape) {
        // 使用context绘制自定义图形, 例如一个简单的矩形
        // context.beginPath()
        // context.rect(0, 0, 100, 50)
        // context.fillStrokeShape(shape) // 这个调用是重要的，它会根据shape的设置（如填充、描边）来完成绘制

        var innerRadius = 30, // 内圆半径
          outerRadius = 60, // 外圆半径
          numPoints = 5, // 多边形的边数
          angle = Math.PI / numPoints, // 每个边的角度
          i

        context.beginPath()
        for (i = 0; i < numPoints * 2; i++) {
          // 绘制多边形
          var r = i % 2 === 0 ? outerRadius : innerRadius,
            x = r * Math.sin(i * angle),
            y = -1 * r * Math.cos(i * angle)
          context.lineTo(x, y)
        }
        context.closePath()
        context.fillStrokeShape(shape)

      },
      x: 300,
      y: 300,
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4
    })

    // add the triangle shape to the layer
    layer.add(triangle)

    // add the layer to the stage
    stage.add(layer);
  </script>
</body>

</html>